<template>
  <div class="register">
    <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">
      <h3 class="title">企业用户注册</h3>
      <el-form-item prop="username">
        <el-input v-model="registerForm.username" type="text" auto-complete="off" placeholder="请输入用户名">
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="registerForm.password" type="password" auto-complete="off" placeholder="请输入密码"
          @keyup.enter.native="handleRegister">
          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>
      <el-form-item prop="confirmPassword">
        <el-input v-model="registerForm.confirmPassword" type="password" auto-complete="off" placeholder="请输入确认密码"
          @keyup.enter.native="handleRegister">
          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>
      <el-form-item prop="name">
        <el-input v-model="registerForm.name" type="text" auto-complete="off" placeholder="请输入企业名称">
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>
      <el-form-item prop="email">
        <el-input v-model="registerForm.email" type="text" auto-complete="off" placeholder="请输入邮箱">
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>
      <el-form-item prop="phoneNumber">
        <el-input v-model="registerForm.phoneNumber" type="text" auto-complete="off" placeholder="请输入企业电话">
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input v-model="registerForm.code" auto-complete="off" placeholder="验证码" style="width: 63%"
          @keyup.enter.native="handleRegister">
          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
        </el-input>
        <div class="register-code">
          <img :src="codeUrl" @click="getCode" class="register-code-img" />
        </div>
      </el-form-item>
      <el-form-item style="width:100%;">
        <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
          @click.native.prevent="handleRegister">
          <span v-if="!loading">注 册</span>
          <span v-else>注 册 中...</span>
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {
    register
  } from "@/api/system/user";

  export default {
    name: "Register",
    data() {
      const equalToPassword = (rule, value, callback) => {
        if (this.registerForm.password !== value) {
          callback(new Error("两次输入的密码不一致"));
        } else {
          callback();
        }
      };
      return {
        codeUrl: "http://localhost:8081/api/captcha",
        registerForm: {},
        registerRules: {
          username: [{
              required: true,
              trigger: "blur",
              message: "请输入企业账号"
            },
            {
              min: 2,
              max: 20,
              message: '用户账号长度必须介于 2 和 20 之间',
              trigger: 'blur'
            }
          ],
          name: [{
            required: true,
            trigger: "blur",
            message: "请输入企业名称"
          }],
          password: [{
              required: true,
              trigger: "blur",
              message: "请输入您的密码"
            },
            {
              min: 5,
              max: 20,
              message: '用户密码长度必须介于 5 和 20 之间',
              trigger: 'blur'
            }
          ],
          confirmPassword: [{
              required: true,
              trigger: "blur",
              message: "请再次输入您的密码"
            },
            {
              required: true,
              validator: equalToPassword,
              trigger: "blur"
            }
          ],
          phoneNumber: [{
            required: true,
            message: "手机号不能为空",
            trigger: "blur"
          }],
          email: [{
            type: "email",
            required: true,
            trigger: "blur",
            message: "请输入正确格式的邮箱"
          }],
          code: [{
            required: true,
            trigger: "change",
            message: "请输入验证码"
          }]
        },
        loading: false
      };
    },
    created() {
      this.getCode();
    },
    methods: {
      getCode() {
        this.codeUrl = this.codeUrl + "?time=" + new Date();
      },
      handleRegister() {
        this.$refs.registerForm.validate(valid => {
          if (valid) {
            this.loading = true;
            register(this.registerForm).then(res => {
              this.$router.push("/login");
              this.$message.success("注册成功，当前账号属于禁用状态，请等待管理员审核")
            }).catch(() => {
              this.loading = false;
              this.getCode();
            })
          }
        });
      }
    }
  };
</script>

<style rel="stylesheet/scss" lang="scss">
  .register {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-image: url("../../assets/images/login-background.jpg");
    background-size: cover;
  }

  .title {
    margin: 0px auto 30px auto;
    text-align: center;
    color: #707070;
  }

  .register-form {
    border-radius: 6px;
    background: #ffffff;
    width: 400px;
    padding: 25px 25px 5px 25px;

    .el-input {
      height: 38px;

      input {
        height: 38px;
      }
    }

    .input-icon {
      height: 39px;
      width: 14px;
      margin-left: 2px;
    }
  }

  .register-code {
    width: 33%;
    height: 38px;
    float: right;

    img {
      cursor: pointer;
      vertical-align: middle;
    }
  }

  .register-code-img {
    height: 38px;
  }
</style>
